<script setup lang="ts">
import AgeEcharts from '@/components/MovieDetail/AgeEcharts.vue';
import InfoEcharts from '@/components/MovieDetail/InfoEcharts.vue';
import WantEchart from '@/components/MovieDetail/WantEchart.vue';
import MovieType from '@/components/MovieDetail/MovieType.vue';

import { getWant } from "@/api/index";
import { ref } from 'vue';

// 获取数据
const summary = ref(null)
const type = ref(null)
const info = ref(null)
const age = ref(null)
const want = ref(null)

getWant().then(res => {
    console.log(res.data.data);
    summary.value = res.data.data.summary
    type.value = res.data.data.userProfile.userMovieInterestInfoChart.series[0].points;
    info.value = res.data.data.userProfile.occupationInfoChart.series[0].points;
    age.value = res.data.data.userProfile.ageRangeInfoChart.series[0].points;
    want.value = res.data.data.trendData.wantChart.series[0].data;
});

</script>
<template>
    <header :style="{background:`url(${$route.query.img})`}">
        <img :src="$route.query.img" alt="">
        <div>
            <p class="nm">{{ $route.query.nm }}</p>
            <span class="pubDesc">{{ $route.query.pubDesc }}</span>
        </div>
    </header>
    <div class="detail">
        <div class="data" v-if="summary">
            <div>
                <p class="title">{{ summary.wishInfo.title }}</p>
                <p class="count">{{ summary.wishInfo.count }}</p>
            </div>
            <div>
                <p class="title">{{ summary.beforeReleaseIncreaseInfo.title }}</p>
                <p class="count">{{ summary.beforeReleaseIncreaseInfo.count }}</p>
            </div>
            <div>
                <p class="title">{{ summary.afterReleaseIncreaseInfo.title }}</p>
                <p class="count">{{ summary.afterReleaseIncreaseInfo.count }}</p>
            </div>
        </div>
        <div class="want">
            <p class="title">想看新增</p>
            <WantEchart :want="want"/>
        </div>
        <div class="want">
            <p class="title">职业信息</p>
            <InfoEcharts :info="info"/>
        </div>
        <div class="want">
            <p class="title">年龄占比</p>
            <AgeEcharts :age="age"/>
        </div>
        <!-- <div class="want">
            <p class="title">电影类型偏好</p>
            <MovieType :type="type"/>
        </div> -->
    </div>
</template>
<style lang="less" scoped>
header{
    display: flex;
    padding: 20rem;
    color: #fff;
    position: relative;
    height: 88rem;
    z-index: 1;
    &::after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(40px);
        z-index: -1;
    }
    
    img{
        width: 48rem;
        height: 68rem;
        margin-right: 8rem;
    }
    .nm{
        font-size: 20rem;
        margin: 4rem;
        margin-top: 12rem;
    }
    .pubDesc{
        font-size: 12rem;
    }
}
.detail {
    width: 100vw;
    margin: auto;
    background-color: #f8f8f8;
    border-radius: 12rem 12rem 0 0;
    position: absolute;
    top: 113rem;
    z-index: 1;

    .data {
        background-color: #fff;
        display: flex;
        justify-content: space-around;
        align-self: center;
        margin-bottom: 4rem;
        margin-top: 4rem;
        padding: 10rem 0;
        border-radius: 20rem 20rem 0 0;

        P {
            
            text-align: center;
        }

        .title {
            font-size: 12rem;
        }

        .count {
            font-size: 20rem;
            font-weight: bold;
            margin: 4rem;
        }
    }
    .want{
        background-color: #fff;
        margin-bottom: 4rem;

        .title{
            margin: 0;
            padding: 8rem 12rem 0;
            font-size: 16rem;
        }
    }
}
</style>